(function () {
  // 1. 准备数据 - 每个key对应的是年,季,月,周下的不同数据
  let data = {
    year: [
      [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
    ],
    quarter: [
      [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
      [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
    ],
    month: [
      [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
      [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
    ],
    week: [
      [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
      [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
    ]
  }
  let myChart = echarts.init(document.querySelector('.sales .line'))
  let option = {
    tooltip: {
      trigger: 'axis'
    },
    color: ["#00f2f1", "#ed3f35"], // 调色盘列表
    legend: {
      data: ['预期销售额', '实际销售额'],
      textStyle: {  // 图例上的文字颜色
        color: "#4c9bfd"  // 浅蓝色
      },
      left: "25%"  // 距离左侧25%
    },
    grid: { // 直角坐标系内绘图网格
      top: '20%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true, // grid 区域是否包含坐标轴的刻度标签
      show: true,
      borderColor: '#012f4a'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisTick: { // 去掉刻度
        show: false
      },
      axisLabel: { // 文字颜色
        color: "#4c9bfd"
      },
      axisLine: { // xAxis轴-垂直线段
        lineStyle: {
          color: "#012f4a"
        }
      },
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    },
    yAxis: {
      type: 'value',
      axisTick: {   // 坐标轴刻度相关设置
        show: false  // 不显示坐标轴刻度
      },
      axisLabel: { // 文字颜色
        color: '#4c9bfd'
      },
      axisLine: { // y轴-垂直线段
        lineStyle: {
          color: "#012f4a"
        }
      },
      splitLine: {  //  轴线相关设置  
        lineStyle: {
          color: '#012f4a' // 坐标轴线(分割线)的颜色 
        }
      }
    },
    series: [ // 
      {
        name: '预期销售额',
        type: 'line',
        // stack: '总量',  // 数据叠加
        smooth: true,  // 平滑曲线
        data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120]
      },
      {
        name: '实际销售额',
        type: 'line',
        // stack: '总量',
        smooth: true,  // 平滑曲线
        data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
      }
    ]
  };
  myChart.setOption(option)
  // 注册点击事件
  // (1) 添加高亮
  // (2) 更新下面的图表
  $('.sales a').on('click', function () {
    // 同步下标 
    nowIndex = $(this).index() - 1 // 因为当前是有一个h标签的兄弟,所以下标是从1开始
    
    $(this).addClass('active').siblings().removeClass('active')
    // (3)获取自定义属性
    let dataType = $(this).attr('data-type')
    // (4)获取数据 
    let dataObj = data[dataType] 
    // console.log(dataObj);
    // (5) 折线图的渲染更新
    option.series[0].data = dataObj[0]  // 将数组中的第一项的数据给到option 系列数据中的第一项的data
    option.series[1].data = dataObj[1]  // 将数组中的第二项的数据给到option 系列数据中的第二项的data
    myChart.setOption(option) // 需要重新设置并渲染
  })

  // 添加鼠标移入和移出事件
  $('.sales').hover(function () {
    // 鼠标移入
    clearInterval(t)
  },function () {
    // 鼠标移出 
    // 恢复定时器
    salesInterval()
  })

  // 自动切换
  let nowIndex = 0 // 默认下标为0
  let t 
  function salesInterval() {
    t = setInterval(()=>{
      nowIndex ++
      if(nowIndex === $('.sales a').length){
        nowIndex = 0
      }
      // 主动触发
      $('.sales a').eq(nowIndex).trigger('click')
    },2000) 
  }
  salesInterval() // 一进来要主动调用一下

  window.addEventListener('resize', function () {
    myChart.resize()
  })
})()